<template>
  <div class="main-app">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="设备名称:">
          <el-input v-model="formInline.name" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-right" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="show-result">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="add">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" :disabled="disabled" @click="edit">
            编辑
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-view" :disabled="disabled" @click="view">
            查看详情
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-delete" type="primary" :disabled="deleteDisabled" @click="deleteEquipment">删除
          </el-button>
        </el-form-item>
      </el-form>

      <div class="result" style="margin-top: -40px;">
        <div class="tool">
          <el-button type="primary" size="mini" icon="el-icon-notebook-1" :disabled="deleteDisabled" plain
                     @click="exportData"
          />
          <el-button type="primary" size="mini" icon="el-icon-printer" plain @click="printData" />
        </div>

        <el-table id="table" ref="multipleTable" v-loading="loading" border :data="tableData" tooltip-effect="dark"
                  style="width: 100%" align="center" @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="model" label="设备型号" />
          <el-table-column prop="site" label="位置" />
          <el-table-column prop="personName" label="负责人姓名" />
          <el-table-column prop="personPhone" label="负责人电话" />
          <el-table-column label="状态" prop="status">
            <template slot-scope="scope">
              <el-tag size="medium">{{
                scope.row.status | parseStatus
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="scope">
              {{ scope.row.createTime | parseDate }}
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination background :current-page.sync="currentPage" layout="total,prev, pager, next, sizes"
                         :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
    <div class="dialog_diy">
      <el-dialog :visible.sync="dialogVisible" width="40%" style="margin-top: 50px;">
        <div slot="title" style="background:#1890FF;color: white;">
          <div style="padding:15px 20px;">设备详情</div>
        </div>
        <el-form :model="form" label-width="220px" style="margin-top: 30px; height: 300px;">
          <el-col :span="11">
            <el-form-item label="设备名称:">
              {{ form.name }}
            </el-form-item>
            <el-form-item label="设备型号:">
              {{ form.model }}
            </el-form-item>
            <el-form-item label="位置:">
              {{ form.site }}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="负责人姓名:">
              {{ form.personName }}
            </el-form-item>
            <el-form-item label="负责人电话:">
              {{ form.personPhone }}
            </el-form-item>
            <el-form-item label="状态:">
              {{ form.status }}
            </el-form-item>
          </el-col>
          <el-row style="margin-top: 40px; text-align: center">
            <el-form :inline="true" class="form-inline">
              <el-form-item>
                <el-button @click="closeDialog">返 回</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-form>
      </el-dialog>
    </div>

    <!-- <el-dialog title="产废单位详情" :visible.sync="dialogVisible" width="90%" :before-close="handleClose" class="abow_dialog">
      <el-form :model="form" label-width="220px">
        <el-col :span="11">
          <el-form-item label="设备名称:">
            {{ form.name }}
          </el-form-item>
          <el-form-item label="设备型号:">
            {{ form.model }}
          </el-form-item>
          <el-form-item label="位置:">
            {{ form.site }}
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="负责人姓名:">
            {{ form.personName }}
          </el-form-item>
          <el-form-item label="负责人电话:">
            {{ form.personPhone }}
          </el-form-item>
          <el-form-item label="状态:">
            {{ form.status }}
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  pageMixin
} from "../../mixins/index";
import {
  getList,
  getEquipmentById,
  remove
} from "../../api/equipment";
import {
  EquipmentStatus
} from "../../utils/resource";
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
    },
    parseStatus(value) {
      if (value != null) {
        return EquipmentStatus[value].label;
      }
    },
  },
  mixins: [pageMixin],
  data() {
    return {
      formInline: {
        name: "",
      },
      form: {
        name: "",
        model: "",
        site: "",
        personName: "",
        personPhone: "",
        status: "",
      },
      dialogVisible: false,
      filename: "设备管理"
    };
  },
  computed: {
    deleteDisabled() {
      return this.ids.length === 0;
    },
  },
  async created() {
    await this.init();
  },
  methods: {
    async view() {
      await this.getEquipmentById(this.id);
      this.dialogVisible = true;
    },
    async deleteEquipment() {
      this.$confirm("此操作将永久删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async() => {
        const ids = this.ids.map((p) => p.id);
        await remove(ids);
        await this.init();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    edit() {
      this.$router.push(`/equipment/edit/${this.id}`);
    },
    add() {
      this.$router.push("/equipment/create");
    },
    async reset() {
      this.formInline = {
        name: "",
      };
      await this.init();
    },
    async init() {
      this.tableData = [];
      this.loading = true;
      const {
        data,
        count
      } = await getList({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        name: this.formInline.name,
      });
      this.tableData = data;
      this.total = count;
      this.loading = false;
    },
    async getEquipmentById(id) {
      const {
        data
      } = await getEquipmentById(id);
      this.form.name = data.name;
      this.form.model = data.model;
      this.form.site = data.site;
      this.form.personName = data.personName;
      this.form.personPhone = data.personPhone;
      console.log(data.status);
      this.form.status = this.parseStatus(data.status);
    },
    parseStatus(value) {
      return EquipmentStatus[value].label;
    },
  },
};
</script>

<style lang="scss" scoped>
  .result {
    margin-top: 10px;
  }

  .show-result {
    margin-top: 10px;
  }

  .dialog_diy {
    ::v-deep .el-dialog__wrapper {

      // eslint-disable-line
      .el-dialog {

        .el-dialog__body {
          padding: 0px;
        }

        .el-dialog__header {
          padding: 0px;
        }

        .el-dialog__headerbtn {
          top: 5px;
          right: 5px;
          padding-top: 10px;
        }

        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
          height: 30px;
          width: 35px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
          color: gray;
        }
      }
    }
  }
</style>
